<template>
  <div>
    <el-input
      v-model="filterText"
      prefix-icon="el-icon-search"
      placeholder="输入关键字进行过滤"/>

    <el-tree
      ref="tree2"
      :data="data"
      :props="defaultProps"
      :other-functions="otherFunctions"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      default-expand-all
      highlight-current
      class="filter-tree"
      @node-click="nodeClick"
    />
  </div>
</template>

<script>
import { serviceTree4All } from '@/api/admin'
export default {
  name: 'KjbServiceTree',
  props: {
    hasQd: {
      type: Boolean,
      default: true
    },
    onlyQd: {
      type: Boolean,
      default: false
    },
    otherFunctions: {
      type: Object,
      default: function() {
        return { disabledFunction: null }
      }
    }
  },
  data() {
    return {
      filterText: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        disabled: 'disabled'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getData() {
      var root = [{
        id: 'TOP',
        label: '全部',
        children: []
      }]
      serviceTree4All(this.hasQd, this.onlyQd).then(res => {
        root[0].children = res.data
        if (this.otherFunctions.disabledFunction) {
          this.otherFunctions.disabledFunction(root)
        }

        this.data = root
      })
    },
    nodeClick(data, note) {
      this.$emit('nodeClick', data, note)
    }
  }
}
</script>

<style>
  div[aria-disabled=true] > .el-tree-node__content:first-child > .el-tree-node__label{
    color: #cccccc;
  }
</style>
